<template>
  <div id="cascade_demo2">

    <h3>级联面板</h3>
    <el-cascader-panel :options="options"></el-cascader-panel>


    <h3>动态加载</h3>
    <!--<el-cascader :props="props"></el-cascader>-->
  </div>
</template>

<script>
let id = 0;
export default {
  data() {
    return  {
      // 绑定级联面板的数据
      options: [{
        value: '1',
        label: '手机',
        children: [{
          value: '11',
          label: '运营商',
          children: [
            {
              value: '111',
              label: '数码产品1'
            },
            {
              value: '222',
              label: '数码产品2'
            },
            {
              value: '333',
              label: '数码产品3'
            }
          ]
        }]
      },{
        value: '2',
        label: '家居'
      }],
      // 动态加载绑定的数据
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          console.log('node', node)
          const { level } = node;

          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        }
      }
    }
  },
  methods: {
    // 当级联组件改变时，触发
    handleChangeAddress(value) {
      console.log('value', value)
      // 由于获取的值是一个数组，通常会将数组转化成一个值
      const result = value.join('-')
      console.log('result', result)
    }
  }
}
</script>

<style>

</style>
